<script setup>
import { useStore } from "vuex";
import { computed, reactive, ref } from "vue";
let store = useStore();
let isMust = computed(() => store.state.isMust);
// // const selectValue = ref("horizontal");
const data = reactive({
  animation: true,
  swipeable: true,
  type: "line",
  color: "#ee0a24",
  background: "#ffffff",
  titleActiveColor: "",
  titleInactiveColor: "",
  tagList: [
    {
      id: Date.now(),
      text: "标签",
      icon: '<svg t="1669351115650" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10413" width="200" height="200"><path d="M958.400956 451.54921c-0.058328-5.760191-2.597151-11.215436-6.965645-14.97097L524.345166 69.511143c-7.498788-6.445806-18.581194-6.445806-26.079982 0L309.582871 231.6755l0-102.017488c0-11.04966-8.901741-19.532869-19.951401-19.532869l-88.034009 0c-11.048637 0-19.928888 8.482185-19.928888 19.532869l0 211.954343L71.176063 436.57824c-4.423753 3.800559-6.967692 9.341762-6.967692 15.173584l0 105.500822c0 7.819083 4.554736 14.921851 11.660574 18.183128 2.670829 1.226944 5.51562 1.824555 8.343015 1.824555 4.699022 0 9.346879-1.654686 13.048177-4.836145l53.29788-45.825698 0 324.100516c0 60.677964 49.364291 110.042255 110.042255 110.042255L764.792447 960.741257c60.677964 0 110.042255-49.364291 110.042255-110.042255L874.834702 527.026228l51.585889 44.335764c5.955642 5.119601 14.356986 6.282077 21.481244 2.965541 7.122211-3.313465 11.645225-10.488889 11.565407-18.342764L958.400956 451.54921zM221.578538 150.034085l48.095391 0 0 115.941616-48.095391 41.336454L221.578538 150.034085zM570.718333 920.725892 436.666244 920.725892 436.666244 700.642404c0-11.031241 8.976442-20.007683 20.007683-20.007683l94.0357 0c11.031241 0 20.007683 8.976442 20.007683 20.007683L570.71731 920.725892zM834.818313 495.895207l0 354.803795c0 38.612413-31.414477 70.02689-70.02689 70.02689l-154.058748 0L610.732675 700.642404c0-33.096792-26.926256-60.023048-60.023048-60.023048l-94.0357 0c-33.096792 0-60.023048 26.926256-60.023048 60.023048l0 220.084511L260.59925 920.726915c-38.612413 0-70.02689-31.414477-70.02689-70.02689L190.57236 495.895207c0-1.172709-0.121773-2.314719-0.315178-3.432169l322.113255-276.958846 322.70268 277.348726C834.921667 493.848595 834.818313 494.858598 834.818313 495.895207zM525.411451 173.947727c-7.502881-6.445806-18.587334-6.446829-26.086122 0.00307L104.223736 513.663896l0-52.726875 407.081439-349.870436 407.176606 349.9523 0.521886 51.205219L525.411451 173.947727z" p-id="10414"></path></svg>',
      color: "#3e82f4",
      logoStyle: "",
      logoRequset: "",
      editorClickContent: "",
    },
  ],
});

const cascaderValue = ref([]);
// const data = reactive([
//   {
//     id: Date.now(),
//     text: "标签",
//     icon: '<svg t="1669351115650" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10413" width="200" height="200"><path d="M958.400956 451.54921c-0.058328-5.760191-2.597151-11.215436-6.965645-14.97097L524.345166 69.511143c-7.498788-6.445806-18.581194-6.445806-26.079982 0L309.582871 231.6755l0-102.017488c0-11.04966-8.901741-19.532869-19.951401-19.532869l-88.034009 0c-11.048637 0-19.928888 8.482185-19.928888 19.532869l0 211.954343L71.176063 436.57824c-4.423753 3.800559-6.967692 9.341762-6.967692 15.173584l0 105.500822c0 7.819083 4.554736 14.921851 11.660574 18.183128 2.670829 1.226944 5.51562 1.824555 8.343015 1.824555 4.699022 0 9.346879-1.654686 13.048177-4.836145l53.29788-45.825698 0 324.100516c0 60.677964 49.364291 110.042255 110.042255 110.042255L764.792447 960.741257c60.677964 0 110.042255-49.364291 110.042255-110.042255L874.834702 527.026228l51.585889 44.335764c5.955642 5.119601 14.356986 6.282077 21.481244 2.965541 7.122211-3.313465 11.645225-10.488889 11.565407-18.342764L958.400956 451.54921zM221.578538 150.034085l48.095391 0 0 115.941616-48.095391 41.336454L221.578538 150.034085zM570.718333 920.725892 436.666244 920.725892 436.666244 700.642404c0-11.031241 8.976442-20.007683 20.007683-20.007683l94.0357 0c11.031241 0 20.007683 8.976442 20.007683 20.007683L570.71731 920.725892zM834.818313 495.895207l0 354.803795c0 38.612413-31.414477 70.02689-70.02689 70.02689l-154.058748 0L610.732675 700.642404c0-33.096792-26.926256-60.023048-60.023048-60.023048l-94.0357 0c-33.096792 0-60.023048 26.926256-60.023048 60.023048l0 220.084511L260.59925 920.726915c-38.612413 0-70.02689-31.414477-70.02689-70.02689L190.57236 495.895207c0-1.172709-0.121773-2.314719-0.315178-3.432169l322.113255-276.958846 322.70268 277.348726C834.921667 493.848595 834.818313 494.858598 834.818313 495.895207zM525.411451 173.947727c-7.502881-6.445806-18.587334-6.446829-26.086122 0.00307L104.223736 513.663896l0-52.726875 407.081439-349.870436 407.176606 349.9523 0.521886 51.205219L525.411451 173.947727z" p-id="10414"></path></svg>',
//     color: "#3e82f4",
//     logoStyle: "",
//     logoRequset: "",
//     editorClickContent: "",
//   },
// ]);
const cascaderOption = [
  { value: "request1", label: "request1" },
  { value: "request2", label: "request2" },
];
const clickAddLabel = () => {
  data.tagList.push({
    id: Date.now(),
    text: "",
    icon: '<svg t="1669351115650" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10413" width="200" height="200"><path d="M958.400956 451.54921c-0.058328-5.760191-2.597151-11.215436-6.965645-14.97097L524.345166 69.511143c-7.498788-6.445806-18.581194-6.445806-26.079982 0L309.582871 231.6755l0-102.017488c0-11.04966-8.901741-19.532869-19.951401-19.532869l-88.034009 0c-11.048637 0-19.928888 8.482185-19.928888 19.532869l0 211.954343L71.176063 436.57824c-4.423753 3.800559-6.967692 9.341762-6.967692 15.173584l0 105.500822c0 7.819083 4.554736 14.921851 11.660574 18.183128 2.670829 1.226944 5.51562 1.824555 8.343015 1.824555 4.699022 0 9.346879-1.654686 13.048177-4.836145l53.29788-45.825698 0 324.100516c0 60.677964 49.364291 110.042255 110.042255 110.042255L764.792447 960.741257c60.677964 0 110.042255-49.364291 110.042255-110.042255L874.834702 527.026228l51.585889 44.335764c5.955642 5.119601 14.356986 6.282077 21.481244 2.965541 7.122211-3.313465 11.645225-10.488889 11.565407-18.342764L958.400956 451.54921zM221.578538 150.034085l48.095391 0 0 115.941616-48.095391 41.336454L221.578538 150.034085zM570.718333 920.725892 436.666244 920.725892 436.666244 700.642404c0-11.031241 8.976442-20.007683 20.007683-20.007683l94.0357 0c11.031241 0 20.007683 8.976442 20.007683 20.007683L570.71731 920.725892zM834.818313 495.895207l0 354.803795c0 38.612413-31.414477 70.02689-70.02689 70.02689l-154.058748 0L610.732675 700.642404c0-33.096792-26.926256-60.023048-60.023048-60.023048l-94.0357 0c-33.096792 0-60.023048 26.926256-60.023048 60.023048l0 220.084511L260.59925 920.726915c-38.612413 0-70.02689-31.414477-70.02689-70.02689L190.57236 495.895207c0-1.172709-0.121773-2.314719-0.315178-3.432169l322.113255-276.958846 322.70268 277.348726C834.921667 493.848595 834.818313 494.858598 834.818313 495.895207zM525.411451 173.947727c-7.502881-6.445806-18.587334-6.446829-26.086122 0.00307L104.223736 513.663896l0-52.726875 407.081439-349.870436 407.176606 349.9523 0.521886 51.205219L525.411451 173.947727z" p-id="10414"></path></svg>',
    color: "",
    logoStyle: "",
    logoRequset: "",
    editorClickContent: "",
  });
};
const deleteTabItem = (id) => {
  data.tagList.splice(
    data.tagList.findIndex((item) => item.id === id),
    1
  );
};
const getFileContent = (file, id) => {
  const target = data.tagList.find((item) => item.id === id);
  // 新建一个FileReader
  let reader = new FileReader();
  // 读取文件(以纯文本的形式返回文件内容)
  reader.readAsText(file.target.files[0], "UTF-8");
  reader.onload = (e) => {
    // 文件内容字符串
    target.icon = e.target.result;
  };
};
const handleCascaderChange = (value) => {
  console.log("handleCascaderChange", value);
};

// const radio1 = ref("1");
// const radio2 = ref("1");
// const radio3 = ref("1");
// const radio4 = ref("1");
// const selectOptions = [
//   { value: "horizontal", label: "水平" },
//   { value: "vertical", label: "垂直" },
// ];
// const selectOptionsInterface = [
//   { value: "request1", label: "接口1" },
//   { value: "request2", label: "接口2" },
// ];

// const clickAddLabel = () => {
//   data.push({
//     id: Date.now(),
//     text: "",
//     icon: '<svg t="1669351115650" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10413" width="200" height="200"><path d="M958.400956 451.54921c-0.058328-5.760191-2.597151-11.215436-6.965645-14.97097L524.345166 69.511143c-7.498788-6.445806-18.581194-6.445806-26.079982 0L309.582871 231.6755l0-102.017488c0-11.04966-8.901741-19.532869-19.951401-19.532869l-88.034009 0c-11.048637 0-19.928888 8.482185-19.928888 19.532869l0 211.954343L71.176063 436.57824c-4.423753 3.800559-6.967692 9.341762-6.967692 15.173584l0 105.500822c0 7.819083 4.554736 14.921851 11.660574 18.183128 2.670829 1.226944 5.51562 1.824555 8.343015 1.824555 4.699022 0 9.346879-1.654686 13.048177-4.836145l53.29788-45.825698 0 324.100516c0 60.677964 49.364291 110.042255 110.042255 110.042255L764.792447 960.741257c60.677964 0 110.042255-49.364291 110.042255-110.042255L874.834702 527.026228l51.585889 44.335764c5.955642 5.119601 14.356986 6.282077 21.481244 2.965541 7.122211-3.313465 11.645225-10.488889 11.565407-18.342764L958.400956 451.54921zM221.578538 150.034085l48.095391 0 0 115.941616-48.095391 41.336454L221.578538 150.034085zM570.718333 920.725892 436.666244 920.725892 436.666244 700.642404c0-11.031241 8.976442-20.007683 20.007683-20.007683l94.0357 0c11.031241 0 20.007683 8.976442 20.007683 20.007683L570.71731 920.725892zM834.818313 495.895207l0 354.803795c0 38.612413-31.414477 70.02689-70.02689 70.02689l-154.058748 0L610.732675 700.642404c0-33.096792-26.926256-60.023048-60.023048-60.023048l-94.0357 0c-33.096792 0-60.023048 26.926256-60.023048 60.023048l0 220.084511L260.59925 920.726915c-38.612413 0-70.02689-31.414477-70.02689-70.02689L190.57236 495.895207c0-1.172709-0.121773-2.314719-0.315178-3.432169l322.113255-276.958846 322.70268 277.348726C834.921667 493.848595 834.818313 494.858598 834.818313 495.895207zM525.411451 173.947727c-7.502881-6.445806-18.587334-6.446829-26.086122 0.00307L104.223736 513.663896l0-52.726875 407.081439-349.870436 407.176606 349.9523 0.521886 51.205219L525.411451 173.947727z" p-id="10414"></path></svg>',
//     color: "",
//     logoStyle: "",
//     logoRequset: "",
//     editorClickContent: "",
//   });
// };
// const deleteTabItem = (id) => {
//   data.splice(
//     data.findIndex((item) => item.id === id),
//     1
//   );
// };
// const getFileContent = (file, key) => {
//   // 新建一个FileReader
//   let reader = new FileReader();
//   // 读取文件(以纯文本的形式返回文件内容)
//   reader.readAsText(file.target.files[0], "UTF-8");
//   reader.onload = (e) => {
//     // 文件内容字符串
//     data[key].icon = e.target.result;
//   };
// };
// const updateStaticState = (e, id) => {
//   data.staticState.find((item) => item.id === id).text = e;
// };
// const addStep = (e, id) => {
//   data.staticState.push({
//     text: "步骤1",
//     isCurrentStep: false,
//     id: Date.now(),
//   });
// };
// const deleteStep = (id) => {
//   data.staticState.splice(
//     data.staticState.findIndex((item) => item.id === id),
//     1
//   );
// };
</script>

<template>
  <div class="set_title_bar">
    <div class="contol_group">
      <span class="demonstration" :class="{ hasNo: isMust && item.text == '' }"
        >切换动画：</span
      >
      <div class="setChoice flex-center">
        <!-- <el-select
          v-model="data.direation"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <el-switch v-model="data.animation" />
      </div>
    </div>

    <div class="contol_group">
      <span class="demonstration" :class="{ hasNo: isMust && item.text == '' }"
        >滑动切换：</span
      >
      <div class="setChoice flex-center">
        <!-- <el-select
          v-model="data.direation"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <el-switch v-model="data.swipeable" />
      </div>
    </div>

    <div class="contol_group">
      <span class="demonstration" :class="{ hasNo: isMust && item.text == '' }"
        >样式风格：</span
      >
      <div class="setChoice flex-center">
        <el-radio-group v-model="data.type" size="small">
          <el-radio label="line" border size="large">
            <div class="tag">标签1</div>
          </el-radio>
          <el-radio label="card" size="large" border>
            <div class="bg-tag">标签1</div>
          </el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="contol_group">
      <span class="demonstration" :class="{ hasNo: isMust && item.text == '' }"
        >主题色：</span
      >
      <div class="setChoice flex-center">
        <el-color-picker v-model="data.color" #ee0a24 />
      </div>
    </div>

    <div class="contol_group">
      <span class="demonstration" :class="{ hasNo: isMust && item.text == '' }"
        >背景色：</span
      >
      <div class="setChoice flex-center">
        <el-color-picker v-model="data.background" #ee0a24 />
      </div>
    </div>

    <div class="contol_group">
      <span class="demonstration" :class="{ hasNo: isMust && item.text == '' }"
        >选中色：</span
      >
      <div class="setChoice flex-center">
        <el-color-picker v-model="data.titleActiveColor" #ee0a24 />
      </div>
    </div>

    <div class="contol_group">
      <span class="demonstration" :class="{ hasNo: isMust && item.text == '' }"
        >未选中色：</span
      >
      <div class="setChoice flex-center">
        <el-color-picker v-model="data.titleInactiveColor" #ee0a24 />
      </div>
    </div>

    <div class="tag-content">
      <div class="add-label-content">
        <div @click="clickAddLabel" class="add-label">添加标签</div>
      </div>
      <div class="tab-item" v-for="(item, index) in data.tagList">
        <div class="icon-content">
          <div class="tag">标签{{ index + 1 }}</div>
          <Icon
            @click="deleteTabItem(item.id)"
            iconClass="delete"
            color="red"
            size="20px"
          ></Icon>
        </div>
        <div class="contol_group">
          <span
            class="demonstration"
            :class="{ hasNo: isMust && item.text == '' }"
            >标题：</span
          >
          <div class="setChoice">
            <el-input v-model="item.text" placeholder="请输入标题"></el-input>
          </div>
        </div>
        <p
          v-if="isMust && item.text == ''"
          class="reminder"
          :class="{ hasNo: isMust && item.text == '' }"
        >
          标题不能为空
        </p>

        <div class="contol_group fn-clear mt-20">
          <span
            class="demonstration"
            :class="{ hasNo: isMust && item.icon == '' }"
            >图标：</span
          >
          <div class="setChoice">
            <div class="editor-click-event position">
              <Icon iconClass="circle-add" color="#409EFF" size="20px"></Icon
              >&nbsp;
              <div class="desc">选择图标</div>
              <input
                type="file"
                @change="getFileContent($event, item.id)"
                class="file"
              />
            </div>
          </div>
        </div>

        <div class="contol_group fn-clear mt-20">
          <span
            class="demonstration"
            :class="{ hasNo: isMust && item.icon == '' }"
            >颜色：</span
          >
          <div class="setChoice">
            <!-- <div class="editor-click-event position">
            <div class="desc">选择图标</div>
          </div> -->
            <el-color-picker v-model="item.color" />
          </div>
        </div>

        <div class="contol_group fn-clear">
          <span
            class="demonstration"
            :class="{ hasNo: isMust && item.logoStyle == '' }"
            >徽标样式：</span
          >
          <div class="setChoice">
            <el-radio-group type="border-card" v-model="item.logoStyle">
              <el-radio-button label="">不显示</el-radio-button>
              <el-radio-button label="redDot">小红点</el-radio-button>
              <el-radio-button label="number">数字</el-radio-button>
            </el-radio-group>

            <!-- 
        <div class="editor-click-event mt-20">
          <div class="desc">编辑点击事件</div>
          &nbsp;<Icon iconClass="add" color="#409EFF" size="20px"></Icon>
        </div> -->
          </div>
        </div>
        <div class="contol_group fn-clear">
          <span
            class="demonstration"
            :class="{ hasNo: isMust && item.logoStyle == '' }"
            >徽标请求：</span
          >
          <div class="setChoice">
            <!-- 
        <div class="editor-click-event mt-20">
          <div class="desc">编辑点击事件</div>
          &nbsp;<Icon iconClass="add" color="#409EFF" size="20px"></Icon>
        </div> -->
            <el-cascader
              placeholder="请选择事件"
              v-model="cascaderValue"
              :options="cascaderOption"
              @change="handleCascaderChange"
            />
          </div>
        </div>

        <div class="contol_group fn-clear">
          <span
            class="demonstration"
            :class="{ hasNo: isMust && item.editorClickContent == '' }"
            >左侧：</span
          >
          <div class="setChoice">
            <div class="editor-click-event">
              <div class="desc">编辑点击事件</div>
              &nbsp;<Icon iconClass="add" color="#409EFF" size="20px"></Icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <p
      v-if="isMust && item.text == ''"
      class="reminder"
      :class="{ hasNo: isMust && item.text == '' }"
    >
      标题不能为空
    </p> -->

    <!-- <div class="contol_group mt-20">
      <span
        class="demonstration"
        :class="{ hasNo: isMust && data.activeIcon == '' }"
        >当前步骤图标：</span
      >
      <div class="setChoice">
        <div class="editor-click-event position">
          <Icon iconClass="circle-add" color="#409EFF" size="20px"></Icon>&nbsp;
          <div class="desc">选择图标</div>
          <input
            type="file"
            @change="getFileContent($event, 'activeIcon')"
            class="file"
          />
        </div>
      </div>
    </div>
    <p
      v-if="isMust && data.activeIcon == ''"
      class="reminder"
      :class="{ hasNo: isMust && data.activeIcon == '' }"
    >
      当前步骤图标不能为空
    </p>

    <div class="contol_group mt-20">
      <span
        class="demonstration"
        :class="{ hasNo: isMust && data.inactiveIcon == '' }"
        >非当前步骤图标：</span
      >
      <div class="setChoice">
        <div class="editor-click-event position">
          <Icon iconClass="circle-add" color="#409EFF" size="20px"></Icon>&nbsp;
          <div class="desc">选择图标</div>
          <input
            type="file"
            @change="getFileContent($event, 'inactiveIcon')"
            class="file"
          />
        </div>
      </div>
    </div>
    <p
      v-if="isMust && data.inactiveIcon == ''"
      class="reminder"
      :class="{ hasNo: isMust && data.inactiveIcon == '' }"
    >
      非当前步骤图标不能为空
    </p>

    <div class="contol_group mt-20">
      <span
        class="demonstration"
        :class="{ hasNo: isMust && data.activeColor == '' }"
        >已完成步骤颜色：</span
      >
      <div class="setChoice">
        <el-color-picker v-model="data.activeColor" />
      </div>
    </div>
    <p
      v-if="isMust && data.activeColor == ''"
      class="reminder"
      :class="{ hasNo: isMust && data.activeColor == '' }"
    >
      已完成步骤颜色不能为空
    </p>

    <div class="contol_group mt-20">
      <span
        class="demonstration"
        :class="{ hasNo: isMust && data.inactiveColor == '' }"
        >未完成步骤颜色：</span
      >
      <div class="setChoice">
        <el-color-picker v-model="data.inactiveColor" />
      </div>
    </div>
    <p
      v-if="isMust && data.inactiveColor == ''"
      class="reminder"
      :class="{ hasNo: isMust && data.inactiveColor == '' }"
    >
      未完成步骤颜色不能为空
    </p> -->

    <!-- <div class="contol_group center">
      <span
        class="demonstration"
        :class="{ hasNo: isMust && data.isDynamicState == '' }"
        >徽标样式：</span
      >
      <div class="setChoice">
        <el-radio-group type="border-card" v-model="data.isDynamicState">
          <el-radio-button :label="false">静态数据</el-radio-button>
          <el-radio-button :label="true">动态数据</el-radio-button>
        </el-radio-group>
      </div>
    </div> -->

    <!-- <template v-if="data.isDynamicState"
      ><div class="contol_group">
        <span
          class="demonstration"
          :class="{ hasNo: isMust && item.text == '' }"
          >数据接口：</span
        >
        <div class="setChoice">
          <el-select
            v-model="data.dynamicStateInterface"
            class="m-2"
            placeholder="请选择数据接口"
            size="large"
          >
            <el-option
              v-for="item in selectOptionsInterface"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </template> -->
    <!-- <template v-else>
      <div
        class="contol_group"
        v-for="(item, index) in data.staticState"
        :key="index"
      >
        <span
          class="demonstration"
          :class="{ hasNo: isMust && item.text == '' }"
          >当前步骤：</span
        >
        <div class="setChoice w-auto flex-center">
          <el-input
            :modelValue="item.text"
            @update:modelValue="updateStaticState($event, item.id)"
            placeholder="请输入标题"
          ></el-input>
          <div class="icon-content-step">
            <Icon
              iconClass="minus-step"
              class="minus"
              color="#FF0000"
              size="23px"
              @click="deleteStep(item.id)"
            ></Icon>

            <Icon
              @click="addStep"
              iconClass="add-step"
              color="#409EFF"
              size="23px"
            ></Icon>
          </div>
        </div>
      </div>
    </template> -->

    <!-- 
      <div class="contol_group fn-clear mt-20">
        <span
          class="demonstration"
          :class="{ hasNo: isMust && item.icon == '' }"
          >颜色：</span
        >
        <div class="setChoice">
          <el-color-picker v-model="item.color" />
        </div>
      </div> -->

    <!-- <div class="contol_group fn-clear">
        <span
          class="demonstration"
          :class="{ hasNo: isMust && item.logoStyle == '' }"
          >徽标样式：</span
        >
        <div class="setChoice">
          <el-radio-group type="border-card" v-model="item.logoStyle">
            <el-radio-button label="">不显示</el-radio-button>
            <el-radio-button label="redDot">小红点</el-radio-button>
            <el-radio-button label="number">数字</el-radio-button>
          </el-radio-group>
        </div>
      </div> -->
    <!-- <div class="contol_group fn-clear">
        <span
          class="demonstration"
          :class="{ hasNo: isMust && item.logoStyle == '' }"
          >徽标请求：</span
        >
        <div class="setChoice">
          <el-cascader
            placeholder="请选择事件"
            v-model="selectValue"
            :options="cascaderOption"
            @change="handleCascaderChange"
          />
        </div>
      </div> -->

    <!-- <div class="contol_group fn-clear">
        <span
          class="demonstration"
          :class="{ hasNo: isMust && item.editorClickContent == '' }"
          >左侧：</span
        >
        <div class="setChoice">
          <div class="editor-click-event">
            <div class="desc">编辑点击事件</div>
            &nbsp;<Icon iconClass="add" color="#409EFF" size="20px"></Icon>
          </div>
        </div>
      </div> -->
  </div>
</template>

<style scoped lang="scss">
.empty {
  border-color: #a94442;
  color: #a94442;
}
.contol_group span {
  // float: left;
  width: 110px;
  text-align: right;
  margin-right: 10px;
}

.setChoice {
  // float: left;
  width: 60%;
  &.w-auto {
    width: auto;
  }
  &.flex-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .tag {
    font-size: 15px;
    border-bottom: 2.5px solid red;
    font-weight: 400;
    padding-bottom: 4px;
  }
  .bg-tag {
    color: #fff;
    background-color: #c9433b;
    padding: 4px 9px;
  }
  .icon-content-step {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .minus {
      margin: 0 8px;
    }
  }

  :deep(.el-radio-group) {
    width: 100%;
    .el-radio-button {
      flex: 1;
      .el-radio-button__inner {
        width: 100%;
        padding: 6px 15px;
      }
    }
  }
  .editor-click-event {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    &.position {
      position: relative;
      // pointer-events: none;
    }
    .add,
    .desc {
      color: #409eff;
    }
    .add {
      font-size: 15px;
    }
    .file {
      // display: none;
      opacity: 0;
      position: absolute;
      top: 0;
      width: 40%;
      cursor: pointer;
    }
  }
  .mt-20 {
    margin-top: 20px;
  }
}
.hasNo {
  color: #f44;
}
/* 提示语 */
.reminder {
  color: #f44;
  margin-top: 5px;
  padding-left: 120px;
  font-size: 12px;
}
.reminder1 {
  padding-left: 5px;
}
.demonstration {
  margin-top: 2px;
}

.contol_group .el-dropdown span {
  text-align: left;
  color: #38f;
  margin-top: 2px;
  margin-left: 5px;
}
.contol_group .el-dropdown span.hasNo {
  color: #f44;
}
.set_title_bar {
  .add-label-content {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    .add-label {
      height: 30px;
      background-color: #5e97f6;
      color: #fff;
      line-height: 30px;
      width: 70px;
      text-align: center;
      position: relative;
    }
  }

  .icon-content {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
  .tab-item {
    margin-top: 10px;
    border: 1px solid grey;
  }

  .contol_group {
    margin-top: 17px;
    display: flex;
    justify-content: start;
    align-items: center;
    &.center {
      justify-content: center;
    }
    .demonstration {
      width: 110px;
      // margin-top: 7px;
    }
  }
  .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
  }
}
</style>
